<title>表单布局</title>

<div class="content-header row">
    <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
        <h3 class="content-header-title mb-0 d-inline-block">表单布局</h3>
        <div class="row breadcrumbs-top d-inline-block">
            <div class="breadcrumb-wrapper mr-1">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
                    <li class="breadcrumb-item"><a href="javascript:;">组件</a></li>
                    <li class="breadcrumb-item active">表单布局</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="content-body">
    <!--最基本的布局-->
    <div class="row match-height">
        <!--简单布局-->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title" id="basic-layout-form">简单布局</h4>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <div class="card-text">
                            <p>最基本的布局方式</p>
                        </div>
                        <form class="form">
                            <div class="form-body">
                                <h4 class="form-section"><i class="ft-flag"></i> 企业信息</h4>
                                <div class="form-group">
                                    <label for="companyName">企业名称</label>
                                    <input type="text" id="companyName" class="form-control" placeholder="企业名称" name="company">
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="email">邮箱</label>
                                            <input type="email" id="email" class="form-control" placeholder="邮箱" name="email">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="countries">企业国籍</label>
                                            <select id="countries" name="countries" class="form-control">
                                                <option value="none" selected="" disabled="">请选择国家</option>
                                                <option value="china">中国</option>
                                                <option value="US">美国</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="comment">企业简介</label>
                                    <textarea id="comment" rows="5" class="form-control" name="comment" placeholder="企业简介"></textarea>
                                </div>
                            </div>
                            <div class="form-actions">
                                <button type="button" class="btn btn-danger">取消</button>
                                <button type="submit" class="btn btn-primary">保存</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!--文本框加边框布局-->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title" id="basic-layout-form-border">加边框</h4>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <div class="card-text">
                            <p>在input、select、textarea 添加 <code>border-*</code> class，<a href="/demo/element/content-helper-classes" class="menu-router">参考页面元素边框颜色</a></p>
                        </div>
                        <form class="form">
                            <div class="form-body">
                                <h4 class="form-section"><i class="ft-flag"></i> 企业信息</h4>
                                <div class="form-group">
                                    <label for="companyName1">企业名称</label>
                                    <input type="text" id="companyName1" class="form-control border-primary" placeholder="企业名称" name="company">
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="email2">邮箱</label>
                                            <input type="email" id="email2" class="form-control border-primary" placeholder="邮箱" name="email">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="countries2">企业国籍</label>
                                            <select id="countries2" name="interested" class="form-control border-primary">
                                                <option value="none" selected="" disabled="">请选择国家</option>
                                                <option value="china">中国</option>
                                                <option value="US">美国</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="comment2">企业简介</label>
                                    <textarea id="comment2" rows="5" class="form-control border-primary" name="comment" placeholder="企业简介"></textarea>
                                </div>
                            </div>
                            <div class="form-actions right">
                                <button type="button" class="btn btn-danger">取消</button>
                                <button type="submit" class="btn btn-primary">保存</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--最基本的布局 end-->

    <div class="row match-height">
        <!--添加小图标-->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title" id="basic-layout-icons">添加小图标</h4>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <form class="form">
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="employeeName">员工姓名</label>
                                            <div class="position-relative has-icon-left">
                                                <input type="text" id="employeeName" class="form-control" placeholder="员工姓名" name="employeeName">
                                                <div class="form-control-position">
                                                    <i class="ft-user"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="projectName">项目名称</label>
                                            <div class="position-relative has-icon-right">
                                                <input type="text" id="projectName" class="form-control" placeholder="项目名称" name="projectName">
                                                <div class="form-control-position">
                                                    <i class="la la-briefcase"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>项目投资金额</label>
                                    <div class="input-group ">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">$</span>
                                        </div>
                                        <input type="text" id="projectMoney" class="form-control" name="projectMoney">
                                        <div class="input-group-append">
                                            <span class="input-group-text">.00</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>项目位置</label>
                                    <div class="input-group ">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"> > </span>
                                        </div>
                                        <input type="text" id="projectLocation" class="form-control" name="projectLocation">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-default"><i class="ft-clock"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-actions right">
                                <button type="button" class="btn btn-danger">取消</button>
                                <button type="submit" class="btn btn-primary">保存</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>

        <!--文本tooltip提醒-->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title" id="basic-layout-Tooltip">提醒</h4>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <form class="form">
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="employeeName2">员工姓名</label>
                                            <div class="position-relative has-icon-left">
                                                <input type="text" id="employeeName2" class="form-control" placeholder="员工姓名" name="employeeName" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="请输入员工姓名">
                                                <div class="form-control-position">
                                                    <i class="ft-user"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="projectName2">项目名称</label>
                                            <div class="position-relative has-icon-right">
                                                <input type="text" id="projectName2" class="form-control" placeholder="项目名称" name="projectName" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="请输入项目名称">
                                                <div class="form-control-position">
                                                    <i class="la la-briefcase"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>项目投资金额</label>
                                    <div class="input-group ">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">$</span>
                                        </div>
                                        <input type="text" id="projectMoney2" class="form-control" name="projectMoney" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="请输入项目投资金额">
                                        <div class="input-group-append">
                                            <span class="input-group-text">.00</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>项目位置</label>
                                    <div class="input-group ">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"> > </span>
                                        </div>
                                        <input type="text" id="projectLocation2" class="form-control" name="projectLocation" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="请输入项目位置">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-default"><i class="ft-clock"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-actions right">
                                <button type="button" class="btn btn-danger">取消</button>
                                <button type="submit" class="btn btn-primary">保存</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row match-height">
        <!--大圆角边框-->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title" id="basic-layout-Round">大圆角边框</h4>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <form class="form">
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="employeeName4">员工姓名</label>
                                            <div class="position-relative has-icon-left">
                                                <input type="text" id="employeeName4" class="form-control round " placeholder="员工姓名" name="employeeName">
                                                <div class="form-control-position">
                                                    <i class="ft-user"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="projectName4">项目名称</label>
                                            <div class="position-relative has-icon-right">
                                                <input type="text" id="projectName4" class="form-control round " placeholder="项目名称" name="projectName">
                                                <div class="form-control-position">
                                                    <i class="la la-briefcase"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="comments3">项目描述</label>
                                            <textarea id="comments3" rows="5" class="form-control round " name="comments" placeholder="项目描述"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-actions right">
                                <button type="button" class="btn btn-danger round ">取消</button>
                                <button type="submit" class="btn btn-primary round ">保存</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>

        <!--方形边框-->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title" id="basic-layout-Square">方形边框</h4>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <form class="form">
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="employeeName3">员工姓名</label>
                                            <div class="position-relative has-icon-left">
                                                <input type="text" id="employeeName3" class="form-control square" placeholder="员工姓名" name="employeeName">
                                                <div class="form-control-position">
                                                    <i class="ft-user"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="projectName3">项目名称</label>
                                            <div class="position-relative has-icon-right">
                                                <input type="text" id="projectName3" class="form-control square" placeholder="项目名称" name="projectName">
                                                <div class="form-control-position">
                                                    <i class="la la-briefcase"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="comments2">项目描述</label>
                                            <textarea id="comments2" rows="5" class="form-control square" name="comments" placeholder="项目描述"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-actions right">
                                <button type="button" class="btn btn-danger square">取消</button>
                                <button type="submit" class="btn btn-primary square">保存</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row match-height">
        <!--表单居中-->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title" id="basic-layout-Center">表单居中</h4>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <form class="form">
                            <div class="row justify-content-center">
                                <div class="col-8">
                                    <div class="form-body">
                                        <div class="form-group">
                                            <label for="employeeName5">员工姓名</label>
                                            <div class="position-relative has-icon-left">
                                                <input type="text" id="employeeName5" class="form-control " placeholder="员工姓名" name="employeeName">
                                                <div class="form-control-position">
                                                    <i class="ft-user"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="projectName5">项目名称</label>
                                            <div class="position-relative has-icon-right">
                                                <input type="text" id="projectName5" class="form-control " placeholder="项目名称" name="projectName">
                                                <div class="form-control-position">
                                                    <i class="la la-briefcase"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="comments4">项目描述</label>
                                            <textarea id="comments4" rows="5" class="form-control " name="comments" placeholder="项目描述"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-actions center">
                                <button type="button" class="btn btn-danger ">取消</button>
                                <button type="submit" class="btn btn-primary ">保存</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!--卡片居中-->
        <div class="col-md-6">
            <div class="row justify-content-center">
                <div class="col-10 ">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title" id="basic-layout-Card-Center">卡片居中</h4>
                        </div>
                        <div class="card-content collapse show">
                            <div class="card-body">
                                <form class="form">
                                    <div class="form-body">
                                        <div class="form-group">
                                            <label for="employeeName6">员工姓名</label>
                                            <div class="position-relative has-icon-left">
                                                <input type="text" id="employeeName6" class="form-control" placeholder="员工姓名" name="employeeName">
                                                <div class="form-control-position">
                                                    <i class="ft-user"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="projectName6">项目名称</label>
                                            <div class="position-relative has-icon-right">
                                                <input type="text" id="projectName6" class="form-control" placeholder="项目名称" name="projectName">
                                                <div class="form-control-position">
                                                    <i class="la la-briefcase"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="comments6">项目描述</label>
                                            <textarea id="comments6" rows="5" class="form-control" name="comments" placeholder="项目描述"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-actions right">
                                        <button type="button" class="btn btn-danger">取消</button>
                                        <button type="submit" class="btn btn-primary">保存</button>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row match-height">
        <div class="col-xl-12 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title" id="horz-layout-basic">水平布局</h4>
                </div>
                <div class="card-content collpase show">
                    <div class="card-body">
                        <div class="card-text">
                            <p>表单form元素添加 <code>.form-horizontal</code> class
                        </div>
                        <form class="form form-horizontal">
                            <div class="form-body">
                                <h4 class="form-section"><i class="ft-clipboard"></i> 项目详情</h4>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group row">
                                            <label class="col-md-3 label-control" for="companyName10">公司名称</label>
                                            <div class="col-md-9">
                                                <input type="text" id="companyName10" class="form-control" placeholder="公司名称" name="company">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group row">
                                            <label class="col-md-3 label-control" for="projectinput7">公司估值</label>
                                            <div class="col-md-9">
                                                <select id="projectinput7" name="budget" class="form-control">
                                                    <option value="0" selected="" disabled="">请选择</option>
                                                    <option value="5000$">5000$</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group row">
                                            <label class="col-md-3 label-control">营业执照</label>
                                            <div class="col-md-9">
                                                <label id="projectinput8" class="file center-block">
                                                    <input type="file" id="file">
                                                    <span class="file-custom"></span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group row">
                                            <label class="col-md-3 label-control" for="projectinput9">公司介绍</label>
                                            <div class="col-md-9">
                                                <textarea id="projectinput9" rows="5" class="form-control" name="comment" placeholder="公司介绍"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-actions right">
                                <button type="button" class="btn btn-danger">取消</button>
                                <button type="submit" class="btn btn-primary">保存</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row match-height">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title" id="basic-layout-label-hidden">隐藏Label</h4>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <form class="form">
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="sr-only" for="employeeName20">员工姓名</label>
                                            <div class="position-relative has-icon-left">
                                                <input type="text" id="employeeName20" class="form-control" placeholder="员工姓名" name="employeeName">
                                                <div class="form-control-position">
                                                    <i class="ft-user"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="sr-only" for="projectName20">项目名称</label>
                                            <div class="position-relative has-icon-right">
                                                <input type="text" id="projectName20" class="form-control" placeholder="项目名称" name="projectName">
                                                <div class="form-control-position">
                                                    <i class="la la-briefcase"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only">项目投资金额</label>
                                    <div class="input-group ">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">$</span>
                                        </div>
                                        <input type="text" id="projectMoney30" class="form-control" name="projectMoney">
                                        <div class="input-group-append">
                                            <span class="input-group-text">.00</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only">项目位置</label>
                                    <div class="input-group ">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"> > </span>
                                        </div>
                                        <input type="text" id="projectLocation30" class="form-control" name="projectLocation">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-default"><i class="ft-clock"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-actions right">
                                <button type="button" class="btn btn-danger">取消</button>
                                <button type="submit" class="btn btn-primary">保存</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
    lucky.require(['form'],function () {
        var form = lucky.form;
    });
</script>